/*
 * 新增产品分类
 * @Author: LuoQianJun
 * @Date: 2018-01-25 15:49:57
 * @Last Modified by: LuoQianJun
 * @Last Modified time: 2018-01-30 09:54:15
 */

<style lang="less" rel="stylesheet/less" type="text/less" scoped>
.v-admin-product-category-create {
    min-height: 600px;
}
</style>

<template>
<div class="v-admin-product-category-create">

    <Row type="flex" justify="start">
        <Col push="1">
        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">

            <Form-item label="分类类型" prop="super_id">
                <Select v-model="formValidate.super_id" clearable placeholder="请选择分类类型">
                            <Option v-for="(value,key) in superCategories" :value="key" :key="key">{{ value }}</Option>
                        </Select>
            </Form-item>

            <Form-item label="分类名称" prop="name">
                <Input v-model="formValidate.name" placeholder="请输入分类名称"></Input>
            </Form-item>

            <Form-item label="分类描述" prop="description">
                <Input v-model="formValidate.description" type="textarea" :autosize="{minRows: 4,maxRows: 5}" placeholder="请输入种类的详细描述" style="width:400px;"></Input>
            </Form-item>

            <Form-item label="优先级" prop="priority">
                <InputNumber v-model="formValidate.priority" :max="10" :min="0" placeholder="请输入优先级"></InputNumber>
            </Form-item>

            <Form-item label="封面图" prop="thumb">
                <Upload :before-upload="file=>fileChange(file,'thumb','image_info')" :on-remove="file=>fileChange(file,'thumb','image_info')" :multiple="false" accept="image/jpg, image/jpeg, image/png" action="//fake_upload_url/">
                    <Button type="ghost" icon="ios-cloud-upload-outline">上传图片</Button>
                    <div class="license-tip" slot="tip" v-if="image_info.name">{{ image_info.name }}</div>
                    <!-- <div class="license-tip" slot="tip" v-else>图片格式为jpg、jpeg或png，大小不超5M</div> -->
                </Upload>
            </Form-item>

            <Form-item>
                <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
                <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
            </Form-item>

        </Form>
        </Col>
    </Row>

</div>
</template>
 
<script>
import {
    validateFile
} from 'src/validate'; //引入校验文件

export default {
    name: 'category-create',

    props: ['super-categories'],

    data: function() {

        return {

            formValidate: {

                super_id: '',

                name: '',

                description: '',

                priority: 0,

                thumb : ''

            }, //新增产品分类的表单

            ruleValidate: {

                super_id: [

                    {
                        required: true,
                        message: '请选择类型',
                        trigger: 'change'
                    }

                ],

                name: [

                    {
                        required: true,
                        message: '分类名称不能为空',
                        trigger: 'blur,change'
                    }

                ],

                description: [

                    {
                        required: true,
                        message: '分类描述不能为空',
                        trigger: 'blur,change'
                    }

                ],

                priority: [

                    {
                        required: true,
                        type: 'number',
                        message: '优先级不能为空',
                        trigger: 'change'
                    }

                ],
            },

            // 上传的图片信息
            image_info: {
                name: '',
                url: '' //这个地方可以 base64 编码的图片，然后给 modal 框去显示图片
            }

        }

    },

    methods: {

        /**
         * file类型input改变
         * @param  {Object} file {选择的文件对象}
         * @return {Boolean} {false则会停止上传}
         */
        fileChange(file,param,info){

            this[info].name = file.name;

            this.formValidate[param] = file;

            return false;

        },

        /**
         * 提交表单
         * @param  {string} name {表单的ref}
         * @return {undefined}
         */
        handleSubmit(name) {

            this.$refs[name].validate((valid) => {

                if (valid) {

                    this.$emit('post', this.formDataCreate());

                } else {

                    this.$Message.error('存在未填写的条目!');

                }
            })
        },

        /**
         * 重置表单
         * @param  {string} name {表单的ref}
         * @return {undefined} 
         */
        handleReset(name) {

            this.$refs[name].resetFields();

            this.formValidate.thumb = '';

            this.image_info.name = '';

        },

        /**
         * 手动拼接formdata数据
         * @return {Object} {拼接好的formdata数据}
         */
        formDataCreate(){

            const new_object = {

                super_id : this.formValidate.super_id,

                name : this.formValidate.name,

                description : this.formValidate.description,

                priority: this.formValidate.priority,

                thumb: this.formValidate.thumb

            };

            let form_data = new FormData();

            Object.keys(new_object).forEach((key)=>{

                if( !new_object[key] )return;

                form_data.append( key , new_object[key] );
        
            });

            return form_data;

        }

    }
}
</script>
 